import React, { PureComponent } from 'react';
import styles from './index.module.less';
import { Carousel } from 'antd';
import { map } from 'lodash-es';
import { sleepFunc } from 'jh-utils';
import keyCodes from '../../keyCodes';
import {CloseCircleOutlined, LeftCircleOutlined, RightCircleOutlined} from "@ant-design/icons";

// export interface PhotoSwiperProps {
//   /**
//    * Boolean 是否显示
//    * */
//   visible?: any;
//   /**
//    * Array 图片列表, 格式：[{ name: '', src:'' }, ...]
//    * */
//   photoList?: any, //
//   /**
//    * 默认值为 0 ，显示第一个
//    * */
//   curInd?: any;
//   /**
//    * onClose 关闭回调
//    * */
//   onClose?: Function;
// }
// interface PhotoSwiperState {
//   opacity;
// }


class PhotoSwiper extends PureComponent {
    carRef;

    static defaultProps ={
        visible: false,
        photoList: [], // Array 图片列表, 格式：[{ name: '', src:'' }, ...]
        curInd: 0,
        onClose: null,
    };
    constructor(props) {
        super(props);
        this.state = {
            opacity: 0,
        };
        this.carRef = null;
    }

    componentDidMount() {
        if (this.props.visible) {
            this.showPhoto();
        }
    }

    componentDidUpdate(prevProps, prevState) {
        if (this.props.visible && prevState.opacity === 0) {
            this.showPhoto();
        }
    }

    showPhoto() {
        this.goto(this.props.curInd);
        sleepFunc(100,{}).then(() => {
            this.setState({ opacity: 1 });
        });
    }

    handleClose() {
        const { onClose } = this.props;

        if (true === this.props.visible) {
            this.setState({ opacity: 0 }, () => {
                sleepFunc(200,{}).then(() => {
                    onClose && onClose();
                });
            });
        }
    }

    goto(ind) {
        if (this.carRef && this.carRef.goTo) {
            this.carRef.goTo(ind);
        }
    }

    render() {
        const { photoList, visible, onClose } = this.props;
        return (
            <div className={`${styles.wrap} photo-swiper-wrap`}
                 style={{ display: visible ? 'block' : 'none' }}
                 onKeyUp={(e) => {
                     let keyCode = e.keyCode || e.which || e.charCode;
                     let shiftKey = e.shiftKey;
                     let altKey = e.altKey;
                     // console.log('onkeyup', keyCode, shiftKey, altKey);
                     if (keyCodes.esc === keyCode) {
                         this.handleClose();
                     }
                 }}>
                <div className={`${styles.contain}`} style={{ opacity: this.state.opacity }}>
                    {
                        photoList ? (
                            <Carousel ref={(ref) => {
                                this.carRef = ref;
                            }} className={styles.carousel}>
                                {
                                    map(photoList, (p, k) => {
                                        return (
                                            <div key={k} className={styles.item}>
                                                <div className={styles.table} style={{ height: document.body.offsetHeight - 20 }}>
                                                    <div className={styles.tableCell}>
                                                        <LeftCircleOutlined style={{ fontSize: '32px', opacity: (k === 0 ? 0.2 : 1) }}
                                                            // disabled={k === 0}
                                                                            onClick={() => {
                                                                                if (k > 0) {
                                                                                    this.goto(k - 1);
                                                                                }
                                                                            }}/>
                                                    </div>
                                                    <div className={`${styles.imgParent} ${styles.tableCell}`}>
                                                        <img className={styles.img} src={p.src} alt={p.name} title={p.name}/>
                                                    </div>
                                                    <div className={styles.tableCell}>
                                                        <RightCircleOutlined style={{ fontSize: '32px', opacity: (k === photoList.length - 1 ? 0.2 : 1) }}
                                                                             onClick={() => {
                                                                                 if (k !== photoList.length - 1) {
                                                                                     this.goto(k + 1);
                                                                                 }
                                                                             }}
                                                        />
                                                    </div>
                                                </div>
                                                <div className={styles.name}>{p.name}</div>
                                            </div>
                                        );
                                    })
                                }
                            </Carousel>
                        ) : (
                            <div className={styles.empty}>
                                暂无图片
                            </div>
                        )
                    }
                </div>
                <CloseCircleOutlined
                    className={styles.close}
                    onClick={() => {
                        this.setState({ opacity: 0 }, () => {
                            sleepFunc(200,{}).then(() => {
                                onClose && onClose();
                            });
                        });
                    }}
                />
            </div>
        );
    }
}

export default PhotoSwiper;

